<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/flexible.js"></script>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    .selectBox{
      width:120px;
      height:30px;
      background-color: DeepSkyBlue;
      position:absolute;
      top:0.3rem
    }
  </style>
</head>

<body>
  <header>
    <select class="selectBox">
      <option class="optionBox" value="fish">黑鲷鱼</option>
      <option class="optionBox" value="shrimp">对虾</option>
      <option class="optionBox" value="shell">牡蛎</option>
    </select>
    <h1>可视化展板</h1>
    <div class="showTime">当前时间：</div>
  </header>
  <section class="mainbox">
    <div class="column">
      <div class="panel line">

        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">

        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie">

        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">
      <div class="map">
        <div class="chart"></div>
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
      </div>
      <div id="intro" class="no">
       公司简介
      </div>
    </div>
    <div class="column">
      <div class="panel line1">

        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar1">

        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie1">

        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>
</body>
<script src="../js/jquery.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/index.js"></script>
<script src="./js/guangdong.js"></script>
<script>
  let t = null;
  t = setTimeout(time, 1000);
  function time() {
    clearTimeout(t);
    let dt = new Date();
    let y = dt.getFullYear();
    let mt = dt.getMonth() + 1;
    let day = dt.getDate();
    let h = dt.getHours();
    let m = dt.getMinutes();
    let s = dt.getSeconds();
    document.querySelector(".showTime").innerHTML =
      `当前时间：${y}年${mt}月${day}日${h}时${m}分${s}秒`
    t = setTimeout(time, 1000);
  }

  var mapChart = echarts.init(document.querySelector('.map .chart'));
  var myData = [
    { name: '广州', value: [113.280637, 23.125178, 10],intro:"这是一家公司的简介" },
    { name: '清远', value: [113.051227, 23.685022, 20],intro:"这是一家公司的简介" },
    { name: '韶关', value: [113.591544, 24.801322, 30],intro:"这是一家公司的简介" },
    { name: '湛江', value: [110.364977, 21.274898, 40],intro:"这是一家公司的简介" },
    { name: '梅州', value: [116.117582, 24.299112, 50],intro:"这是一家公司的简介" },
    { name: '河源', value: [114.697802, 23.746266, 60],intro:"这是一家公司的简介" },
    { name: '肇庆', value: [112.472529, 23.051546, 90],intro:"这是一家公司的简介" },
    { name: '惠州', value: [114.412599, 23.079404, 120],intro:"这是一家公司的简介" },
    { name: '茂名', value: [110.919229, 21.659751, 190],intro:"这是一家公司的简介" },
    { name: '江门', value: [113.094942, 22.590431, 50],intro:"这是一家公司的简介" },
    { name: '阳江', value: [111.975107, 21.859222, 170],intro:"这是一家公司的简介" },
    { name: '云浮', value: [112.044439, 22.929801, 80],intro:"这是一家公司的简介" },
    { name: '汕尾', value: [115.364238, 22.774485, 90],intro:"这是一家公司的简介" },
    { name: '揭阳', value: [116.355733, 23.543778, 110],intro:"这是一家公司的简介" },
    { name: '珠海', value: [113.553986, 22.224979, 70],intro:"这是一家公司的简介" },
    { name: '佛山', value: [113.122717, 23.028762, 40],intro:"这是一家公司的简介" },
    { name: '潮州', value: [116.632301, 23.661701, 60],intro:"这是一家公司的简介" },
    { name: '汕头', value: [116.708463, 23.37102, 70],intro:"这是一家公司的简介" },
    { name: '深圳', value: [114.085947, 22.547, 70],intro:"这是一家公司的简介" },
    { name: '东莞', value: [113.746262, 23.046237, 80],intro:"这是一家公司的简介" },
    { name: '中山', value: [113.382391, 22.521113, 80],intro:"这是一家公司的简介" }
  ];

  // mapChart的配置
  var option = {
    geo: {
      map: '广东',
      label: {

        emphasis: {
          show: true,
          color: "#fff"
        }
      },
      itemStyle: {
        // 定义样式
        normal: {// 普通状态下的样式
          areaColor: 'rgba(20, 41, 87,0.6)',//#323c48
          borderColor: '#20B2AA'
        },
        emphasis: {					// 高亮状态下的样式
          areaColor: '#00F5FF'
        },

      }

    },
    //backgroundColor: '#BBFFFF',
    tooltip: {
        trigger: "item",
        show:true,
        formatter: function(e) {
           return e.name+":"+e.value[2]
        }
    },
    visualMap: {
            type: 'continuous', // 连续型
            min: 0,       		// 值域最小值，必须参数
            max: 200,			// 值域最大值，必须参数
            calculable: true,	// 是否启用值域漫游
            inRange: {
                color: ['#50a3ba','#eac736','#d94e5d']
                // 指定数值从低到高时的颜色变化
            },
            textStyle: {
                color: '#fff'	// 值域控件的文本颜色
            }
        },
    title: {
      text: type+'产业分布',
      subtext: 'data from subvey',
      sublink: '',
      left: 'center',
      textStyle: {
        color: '#fff'
      }
    },



    series: [
      {

        name: '产量分布', // series名称
        type: 'scatter', // series图表类型
        coordinateSystem: 'geo', // series坐标系类型
        data: myData,// series数据内容
        symbol: 'pin',
            symbolSize: [50,50],
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 9,
                    },
                    formatter (value){
                        return value.data.value[2]
                    }
                }
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
      },
      {
         
         symbolSize: 5,
         
         itemStyle: {
             normal: {
                 color: '#fff'
             }
         },
         name: 'light',
         type: 'scatter',
         coordinateSystem: 'geo',
         data: myData,
         
     },
    ],

  }
  mapChart.setOption(option);
  mapChart.on("click","series",function (param){
    $("#intro").html(param.data.intro)
  })
  function getMapData(){
  $.ajax({
    type:'get',
    url:'/'+url+'data',
    success:(res)=>{
      option.title.text=type+"产业分布"
      option.series[0].data = res.data;
      option.series[1].data = res.data;
      mapChart.setOption(option)
    },
    error:(xhr,status,error)=>{
      console.log('出错了',error)
    }
  })
}
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    mapChart.resize();
  });
</script>
<script src="./js/index2.js"></script>
</html>